import { useEventListener } from '@vueuse/core'
import type { Directive, DirectiveBinding } from 'vue'
interface ElType extends HTMLElement {
  copyData: string | number
}
/**
 * v-copy
 * 复制某个值至剪贴板
 */
const copy: Directive = {
  mounted(el: ElType, binding: DirectiveBinding) {
    el.copyData = binding.value
    useEventListener(el, 'click', handleFn)
  },
  updated(el: ElType, binding: DirectiveBinding) {
    el.copyData = binding.value
  },
}

function handleFn(this: any) {
  const input = document.createElement('input')
  input.value = this.copyData.toLocaleString()
  document.body.appendChild(input)
  input.select()
  document.execCommand('Copy')
  document.body.removeChild(input)
  ElMessage.success('复制成功')
}

export default copy
